<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import axios from 'axios';

const currentYear = ref(new Date().getFullYear());
const startButton = ref(null);
const tipText = ref(null);
const startButtonl = ref(null);
const tipTextl = ref(null);
const showHand = ref(false);
const showPLayer = ref(false);
// 获取路由实例
const router = useRouter();

function startGame() {
  const requestData = {
    "request_source": "frontend"
  };
  axios.post('http://localhost:5000/start_game', requestData)
      .then((response) => {
        if (response.data.message === "游戏已成功启动") {
          tipText.value.textContent = "游戏正在后台启动，请稍等...";
          showSentence();
        }
      })
      .catch((error) => {
        tipText.value.textContent = "启动游戏出现问题，请检查后端服务是否正常运行。";
      });
}

function startPlayer() {
  const requestData = {
    "request_source": "frontend"
  };
  axios.post('http://localhost:5000/start_player', requestData)
      .then((response) => {
        if (response.data.message === "游戏已成功启动") {
          tipTextl.value.textContent = "游戏正在后台启动，请稍等...";
          showSen();
        }
      })
      .catch((error) => {
        tipTextl.value.textContent = "启动游戏出现问题，请检查后端服务是否正常运行。";
      });
}

onMounted(() => {
  startButton.value.addEventListener('click', startGame);
  startButtonl.value.addEventListener('click', startPlayer);
});

// 用于切换显示注册表单的方法
const showSentence = () => {
  showHand.value =!showHand.value;
};

// 用于切换显示注册表单的方法
const showSen = () => {
  showPLayer.value =!showPLayer.value;
};
const goToHome = () => {
  router.push('/Home');
};
</script>

<template>
  <div class="bg-black text-5xl">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.jpg" alt="bg-image" class="w-screen fixed top-0 left-0 z-0 object-cover" />
    <!-- 返回首页按钮 -->
    <button class="bg-amber-500 text-white top-0 right-0 px-12 py-10 rounded-lg relative m-8 hover:bg-amber-600 focus:outline-none" @click="goToHome">
      <span>返回首页</span>
    </button>
    <div class="min-h-screen flex flex-col items-center justify-center relative space-y-4">
      <button ref="startButton"
              class="px-12 py-10 text-white bg-amber-600 rounded-md hover:bg-amber-700 focus:outline-none focus:ring focus:ring-amber-300">
        连点成画
      </button>
      <p ref="tipText" class="text-white text-4xl"></p>
      <p v-if="showHand" class="text-white bg-amber-600 p-6">点击右上角退出游戏</p>
      <button ref="startButtonl"
              class="px-12 py-10 text-white bg-amber-600 rounded-md hover:bg-amber-700 focus:outline-none focus:ring focus:ring-amber-300">
        音乐盲盒
      </button>
      <p ref="tipTextl" class="text-white text-4xl"></p>
      <p v-if="showPLayer" class="text-white bg-amber-600 p-6">点击ESC退出游戏</p>
    </div>
    <!-- 底部版权信息区 -->
    <footer class="bg-none p-4 text-white text-4xl mt-12 text-center relative">
      &copy; {{ currentYear }} 线上博物馆项目组. 保留所有权利。
    </footer>
  </div>
</template>